﻿<html>
<head>
    <title>Enter Student Ifo</title>
    <style type="text/css">
        body {background-image:url('image2.jpg');}
    </style>

    <script language="javascript">
        var i = 1;
        function welcome() {
            ten = prompt("Xin mời nhập tên bạn");
            if (ten != null)
                alert("Xin chào " + ten + " .Chúc bạn có một ngày làm việc hiệu quả");
            else
                alert("Xin chào bạn. Chúc bạn có một ngày làm việc hiệu quả");
        }

        function goodbye() {
            alert("Goodbye,See u again!");
        }

        function bgChanger(bg){
            document.body.style.background=bg;
        }

        function moveright() {
            document.getElementById('header').style.position = "relative";
            document.getElementById('header').style.left = i;
            i=i+20;
        }

        function moveleft() {
            document.getElementById('header').style.position = "relative";
            document.getElementById('header').style.left = i;
            i=i-20;
        }
        function change_header(c_hd) {
            document.getElementById('header').innerHTML = c_hd;
        }

        function getinfo(txt) {
            document.getElementById('tip').innerHTML = txt;
        }

        function reset() {
            document.getElementById('tip').innerHTML = "";
        }

        function change_bgtable(color) {
            document.getElementById('tbl_nhap').style.background = color;
        }

        function change_textcolor(color) {
            document.getElementById('nhap').style.color = color;
            document.getElementById('nhap1').style.color = color;
            document.getElementById('nhap2').style.color = color;
            document.getElementById('nhap3').style.color = color;
            document.getElementById('nhap4').style.color = color;
        }

        function moveover() {
            document.getElementById('image').width = "450";
            document.getElementById('image').height = "300";
        }
        function moveback() {
            document.getElementById('image').width = "150";
            document.getElementById('image').height = "100";
        }

        myImages = new Array();
        myImages[0] = "image1.jpg";
        myImages[1] = "image2.jpg";
        myImages[2] = "image3.jpg";
        myImages[3] = "image4.jpg";
        myImages[4] = "image5.jpg";
        myImages[5] = "image6.jpg";
        imagecounter = myImages.length - 1;
        i = 0;

        function first() {
            document.getElementById('imageviewer').src = myImages[0];
            i = 0;
        }

        function previous() {
            if (i > 0) {
                i--;
                document.getElementById('imageviewer').src = myImages[i];
            }
        }

        function next() {
            if (i < imagecounter) {
                i++;
                document.getElementById('imageviewer').src = myImages[i];
            }
        }

        function last() {
            document.getElementById('imageviewer').src = myImages[imagecounter];
            i = imagecounter;
        }

        function cursor(image) {
            trail.innerHTML = "<img src='" + image + "' />";
            trail.style.visibility = "visible";
            trail.style.position = "absolute";
            trail.style.left = event.clientX + 10;
            trail.style.top = event.clientY+500;
        }

        function hidecursor() {
            trail.style.visibility = "hidden";
        }
    </script>
</head>
<body onload="welcome()" onunload="goodbye()">
    <br />
    <center><font color="blue"><h2 id="header" onclick="this.style.color='yellow'">Nhập thông tin về sinh viên</h2></font></center>
    <center>
    <form>
    <table cellspacing="10" id="tbl_nhap">
        <tr>
            <td>
            <span onmouseover="getinfo('Độ dài tối đa 50 kí tự')" onmouseout="reset()">
                Tên sinh viên
            </span>
            </td>
            <td><input type="text" name="txt_ten" id="nhap" /></td>
        </tr>
        <tr>
            <td>
            <span onmouseover="getinfo('Tên chuyên ngành bạn đang theo học')" onmouseout="reset()">
                Chuyen nganh
            </span>            
            </td>
            <td><input type="text" name="txt_nghanh" id="nhap1" /></td>
        </tr>
        <tr>
            <td>
            <span onmouseover="getinfo('Yêu cầu nhập chính xác mã sinh viên của bạn')" onmouseout="reset()">
                Mã sinh viên
            </span>
            </td>
            <td><input type="text" name="txt_ma" id="nhap2" /></td>
        </tr>
        <tr>
            <td>
            <span onmouseover="getinfo('Không thực sự cần thiết')" onmouseout="reset()">
                Số điện thoại
            </span>
            </td>
            <td><input type="text" name="txt_dt" id="nhap3" /></td>
        </tr>
        <tr>
            <td>
            <span onmouseover="getinfo('Yêu cầu nhập chính xác địa chỉ của bạn')" onmouseout="reset()">
                Địa chỉ
            </span>                
            </td>
            <td><input type="text" name="txt_diachi" id="nhap4"/></td>
        </tr>
    </table>    
    <font color="red"><h4 id="tip"></h4></font>
    <font color="blue"><h3>Tự thuật bản thân</h3></font>
    <textarea cols="50" rows="10" id="tr_tuthuat"></textarea><br />
    <input type="reset" name="bt_reset" value="Reset" />
    <input type="submit" name="bt_submit" value="Submit" />
    </form>
    </center>

    <center>
        <font color="blue"><h3>Ứng dụng DHTML</h3></font>
        <table id="dhtml">
            <tr>
                <td><font color="red">Ẩn hoặc hiện nội dung của một textfiled</font></td>
                <td align="center">
                    <input type="button" value="Hidden" name="bt_an" onclick="document.getElementById('tr_tuthuat').style.visibility='hidden'" />
                    <input type="button" value="Show" name="bt_hien" onclick="document.getElementById('tr_tuthuat').style.visibility='visible'" />
                </td>                    
            </tr>
            <tr>    
                <td><font color="red">Di chuyển thanh tiêu đề</font></td>
                <td align="center">
                    <input type="button" name="bt_moveleft" value="MoveLeft" onclick="moveleft()"/>
                    <input type="button" name="bt_moveright" value="MoveRight" onclick="moveright()"/>
                </td>
            </tr>
            <tr>
                <td><font color="red">Thay đổi nội dung thanh tiêu đề</font></td>
                <td>
                    <input type="text" name="txt_thaydoi" id="txt"/>
                    <input type="button" name="Change" value="Change" onclick="change_header(txt.value)"/>
                </td>
            </tr>
            <tr>
                <td>
                        <select id="sl">
                            <option>Select color</option>
                            <option>blue</option>
                            <option>green</option>
                            <option>yellow</option>
                            <option>pink</option>
                        </select>
                </td>
                <td><input type="button" value="Change" name="doimau" onclick="change_bgtable(sl.value)" /></td>
            </tr>
            <tr>
                <td>
                        <select id="sl1">
                            <option>Select color</option>
                            <option>blue</option>
                            <option>green</option>
                            <option>yellow</option>
                            <option>pink</option>
                        </select>
                </td>
                <td><input type="button" value="chang_text_color" onclick="change_textcolor(sl1.value)"/></td>
            </tr>
        </table>
        <br />
        <font color="red">Thay đổi kích thước của ảnh</font><br />
        <img id="image" src="image1.jpg" onmouseover="moveover()" onmouseout="moveback()" width="150" height="100"/>
        <br />
        <font color="red">Image Viewer</font><br />
        <form>
            <input type="button" value="First" onclick="first()">
            <input type="button" value="Previous" onclick="previous()">
            <input type="button" value="Next" onclick="next()">
            <input type="button" value="Last" onclick="last()">
        </form>

        <img id="imageviewer" src="image1.jpg" width="200" height="150" />

        <br />
        <font color="red">Tạo biểu tượng cho link</font><br />

        <a href="http://www.dantri.com.vn" onmousemove="cursor('dantri.jpg')" onmouseout="hidecursor()">Dân trí</a><br />
        <a href="http://www.vnexpress.net" onmousemove="cursor('vnexpress.jpg')" onmouseout="hidecursor()">Vnexpress</a><br />
        <a href="http://www.kenh14.vn" onmousemove="cursor('kenh14.jpg')" onmouseout="hidecursor()">Kênh14</a><br />

        <span id="trail" style="visibility:hidden">Hello</span>
    </center>
</body>
</html>
